<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="jquery-ui.min.js"></script>
    <link rel="stylesheet" href="jquery-ui.theme.min.css">
</head>
<body>

<ul id="navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Buy!</a></li>
    <li><a href="#">Gift Ideas</a></li>
</ul>
<br>
<br>
<br>
<br>
<div id="container">
    <p id="striker">This is Anvesh's year.He is about to achieve many great events!This year he is a very lucky person.</p>
    <p id="content">He got his driver-license,he know he can do anything whatever he thinks and he will.</p>
    <p>Anvesh is a great-acheiver of tasks.</p>
</div>
<br>
<style>
    #container {
        height:100px;
        width:350px;
        overflow:scroll;
        position: relative;
    }
    #content
    {
        height:2000px;
    }
    #navigation {
        position: relative;
        width: inherit;
        top: 0;
        right: 0;
        margin: 0;
    }
    #navigation li {
        height:20px;
        float:left;
        list-style-type: none;
        width:70px;
        padding:3px;
        border-right:1px solid #3687AF;
        background-color: #015287;
        background-repeat: no-repeat;
        background-position: center 30px;
    }
    #navigation li a {
        color: #FFFFFF;
    }
    #navigation #home {
        background-image:url('home_icon.png');
    }
</style>
<!--<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>"-->
<!--<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script> <script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.compatibility.js"></script>-->


<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!--<script src="C:\Users\AnveshReddy\Desktop\Java UI\Color\edwinm-Color-animation-jQuery-plugin-af2f562\jquery.animate-colors-min.js"></script>-->
<!--<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
<script>
    $('<div id="navigation_blob"><div>').css({width:0,height:$('#navigation li:first a').height()+10}).appendTo('body #navigation');
    $('#navigation a ').hover(function(){$('#navigation_blob').
                                              animate(
                                                    { width:$(this).width()+20,left:$(this).position().left},
                                                    {duration:'slow',easing:'easeOutCirc',queue:false});},
                               function(){$('#navigation_blob').animate({width:$(this).width()+10,left:$(this).position().left},{duration:'slow',easing:'easeOutCirc',queue:false})
                                                               .animate({left:$('#navigation li:first a').position().left},'fast');});
    $.noConflict();
</script>
-->
<script>
    $('#container').scroll(function(){$('#striker').append('<span class="scrolled">You have scrolled!</span>');});
   <!-- $('#container p:first').effect('shake',{times:3},300).effect('highlight',{},3000).hide('explode',{},1000);-->
    $('#navigation li').hover(function() {
                $(this)
                        .stop(true)
                        .animate(
                        {height: '60px'},
                        {duration: 500, easing: 'easeOutBounce'}
                )
            },
            function() {
                $(this)
                        .stop(true)
                        .animate(
                        {height:'20px'},
                        {duration: 500, easing: 'easeOutCirc'}
                )
            }
    );
</script>
</body>
</html>